<template>
	<view class="content" v-if="info">
		<view class="c-top">
			<view class="c-t-l">
				<view class="tt-w">
					<view class="tt">{{$t('index.jingong')}}</view>
					<view class="yuan">
						{{info.technic.attack.home}}
						<view style="width: 150rpx;height: 150rpx;">
							<qiun-data-charts type="ring" :chartData="attackData" :opts="opts" :animation="false" />
						</view>
						{{info.technic.attack.away}}
					</view>
				</view>
				<view class="guoqi">
					<view class="qi">
						<image class="image" src="@/static/image/index/add_white_side.png"></image>
						{{info.technic.corner.home}}
					</view>
					<view class="qi">
						<image class="image" src="@/static/image/index/red.png"></image>
						{{info.technic.red_card.home}}
					</view>
					<view class="qi">
						<image class="image" src="@/static/image/index/yellow.png"></image>
						{{info.technic.yellow_card.home}}
					</view>
				</view>
			</view>
			<view class="c-t-c">
				<view class="tt-w">
					<view class="tt">{{$t('index.wxjingong')}}</view>
					<view class="yuan">
						{{info.technic.attack_danger.home}}
						<view style="width: 150rpx;height: 150rpx;">
							<qiun-data-charts type="ring" :chartData="attack_dangerData" :opts="opts" :animation="false"/>
						</view>
						{{info.technic.attack_danger.away}}
					</view>
				</view>
				<view class="text">
					{{$t('index.shezheng')}}/{{$t('index.shepian')}}
				</view>
				<view class="szsp">
					<view class="shezheng">
						<image class="image" src="@/static/image/index/home_shot_bg.png"></image>
						<view class="num1">{{info.technic.shoot.home}}</view>
						<view class="num2">{{info.technic.shoot.away}}</view>
					</view>
					<view class="shepian">
						<image class="image" src="@/static/image/index/away_shot_bg.png"></image>
						<view class="num1">{{info.technic.shoot_no.home}}</view>
						<view class="num2">{{info.technic.shoot_no.away}}</view>
					</view>
				</view>
			</view>
			<view class="c-t-r">
				<view class="tt-w">
					<view class="tt">{{$t('index.kongqiulv')}}</view>
					<view class="yuan">
						{{info.technic.ball_rate.home}}
						<view style="width: 150rpx;height: 150rpx;">
							<qiun-data-charts type="ring" :chartData="ball_rateData" :opts="opts" :animation="false"/>
						</view>
						{{info.technic.ball_rate.away}}
					</view>
				</view>
				<view class="guoqi">
					<view class="qi">
						<image class="image" src="@/static/image/index/add_white_side.png"></image>
						{{info.technic.corner.home}}
					</view>
					<view class="qi">
						<image class="image" src="@/static/image/index/red.png"></image>
						{{info.technic.red_card.home}}
					</view>
					<view class="qi">
						<image class="image" src="@/static/image/index/yellow.png"></image>
						{{info.technic.yellow_card.home}}
					</view>
				</view>
			</view>
		</view>
		<view class="c-center">
			<view class="time-line">
				<view class="line"></view>
				<view class="item" v-for="(item,index) in info.event" :key="index">
					<view class="i-left">
						<template v-if="item.isHome==1">
							<view class="i-t-l">
								<view>{{item.name}}</view>
							</view>
							<view>
								<image class="image" :src="require(`../../../static/image/index/h${item.kind}.png`)"></image>
							</view>
						</template>
					</view>
					<view class="i-center">{{item.time}}</view>
					<view class="i-right">
						<template v-if="item.isHome==0">
							<view>
								<image class="image" :src="require(`../../../static/image/index/h${item.kind}.png`)"></image>
							</view>
							<view class="i-t-l">
								<view>{{item.name}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			matchId: {
				type: [String, Number],
				default: ''
			},
		},
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {},
		data() {
			return {
				info:'',
				attackData:'',//进攻
				attack_dangerData:'',//危险进攻
				ball_rateData:'',//控球率
				opts: {
					dataLabel: false, //是否显示图表区域内数据点上方的数据文案
					dataPointShape: false, //是否显示数据点的图形标识
					dataPointShapeType: 'hollow', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
					rotate: false,
					rotateLock: false,
					color: ["#ffaa00", "#1890FF"],
					enableScroll: false,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							centerColor: '#10182b',
							ringWidth: 3,
							border: false
						}
					}
				}
			}
		},
		mounted() {
			this.matchDetail()
		},
		methods: {
			matchDetail() {
				uni.$u.http.get(this.api.api_v1_fbdata_matchDetail, {
					params: {
						matchId: this.matchId
					}
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data
						let attack = {
							series: [{
								data: [{
									"value":parseInt(this.info.technic.attack.home)||1
								}, {
									"value":parseInt(this.info.technic.attack.away)
								}]
							}]
						};
						let attack_danger = {
							series: [{
								data: [{
									"value":parseInt(this.info.technic.attack_danger.home)||1
								}, {
									"value":parseInt(this.info.technic.attack_danger.away)
								}]
							}]
						};
						let ball_rate = {
							series: [{
								data: [{
									"value":parseInt(this.info.technic.ball_rate.home)||1
								}, {
									"value":parseInt(this.info.technic.ball_rate.away)
								}]
							}]
						};
						this.attackData = JSON.parse(JSON.stringify(attack));
						this.attack_dangerData = JSON.parse(JSON.stringify(attack_danger));
						this.ball_rateData = JSON.parse(JSON.stringify(ball_rate));
					
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #bfbfbf;
		font-size: 12px;
		.c-top {
			margin-bottom: 10px; display: flex;justify-content: space-between;width: 100%;background-color: #001E28;padding: 10px 0;
			.c-t-l,.c-t-r ,.c-t-c {
				flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: space-between;
				.tt-w{
					flex: 1;display: flex;flex-direction: column;align-items: center;
					.yuan{
						display: flex;align-items: center;
					}
					
				}
				.text{
					margin:0 0 10px;
				}
				.guoqi{
					display: flex;justify-content: space-around;width: 100%;
					.qi{
						display: flex;flex-direction: column;align-items: center;justify-content: center;
						.image{
							width: 20px;height: 20px;margin: 10px 0;
						}
					}
				}
			}
			
			.c-t-c {
				width: 200rpx;
				.szsp{
					display: flex;
					.shezheng,.shepian{
						position: relative;
						.image{
							width:100rpx;height: 100rpx;border-radius: 50%;
						}
						.num1{
							position: absolute;top: 2px;right: 20px;color: #fff;
						}
						.num2{
							position: absolute;bottom: 10px;right: 15px;color: #fff;
						}
					}
					.shepian{
						.num2{
							right: 22px;
						}
					}
				}
			}
		}
		.c-center{
			background-color: #001E28;padding: 10px;
			.time-line{
				position: relative;
				.line{
					width: 1px;height: 100%;background: hsla(0,0%,100%,.10196);margin: auto;
					position: absolute;left: 0;right: 0;z-index: 0;
				}
				.item{
					display: flex;justify-content: space-between;align-items: center;z-index: 1;position: relative;
					margin-bottom: 10px;
					.i-left,.i-right{
						flex: 1;display: flex;align-items: center;
						justify-content: flex-end;
						.image{
							width: 15px;height: 15px;margin: 3px 5px 0;
						}
					}
					.i-right{
						justify-content: start;
					}
					.i-center{
						font-size: 12px; background-color: #04141D;border-radius: 5px;width: 50px;height: 28px;text-align: center;line-height: 28px;
					}
				}
			}
		}
		
	}
</style>